import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import s from './ProgressCircle.module.css';

export default function ProgressCircle({
	className,
	strokeWidth,
	strokeLinecap,
	percent,
}) {
	const { d, circumference } = React.useMemo(() => {
		const r = (100 - strokeWidth) / 2;

		return {
			d:
				'M 50,50 ' +
				`m 0,-${r}, ` +
				`a ${r},${r} 0 1 1 0,${r * 2} ` +
				`a ${r},${r} 0 1 1 0,-${r * 2}`,
			circumference: r * 2 * Math.PI,
		};
	}, [strokeWidth]);
	const arc = (percent * circumference) / 100 || 0;

	return (
		<svg viewBox="0 0 100 100" className={cn(className, s.progressCircle)}>
			<path
				className={s.trail}
				d={d}
				strokeDasharray={`${circumference}px ${circumference}px`}
				strokeWidth={strokeWidth}
				fillOpacity="0"
			/>
			<path
				className={s.path}
				d={d}
				strokeLinecap={strokeLinecap}
				strokeDasharray={`${arc}px ${circumference}px`}
				strokeWidth={strokeWidth}
				fillOpacity="0"
			/>
		</svg>
	);
}

ProgressCircle.propTypes = {
	className: PropTypes.string,
	strokeWidth: PropTypes.number,
	strokeLinecap: PropTypes.string,
	percent: PropTypes.number.isRequired,
};

ProgressCircle.defaultProps = {
	className: s.progressCircle,
	strokeWidth: 10,
	strokeLinecap: 'round',
	percent: 0,
};
